<template>
  <div>
    <el-container>
      <el-main>
        <div class="nav">
          <div>
            <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
              <el-button slot="append" @click="sx" class="el-icon-refresh-right"></el-button>
              <el-button slot="append" icon="el-icon-search" @click="sc"></el-button>
            </el-input>
          </div>

          <el-button @click="dialogVisible = true" type="primary" color="red">添加用户</el-button>

          <el-dialog title="输入修改信息!" :visible.sync="dialogVisible" width="30%">
            <br />姓名:
            <el-input placeholder="请输入内容" v-model="username" clearable></el-input>邮箱:
            <el-input placeholder="请输入内容" v-model="email" clearable></el-input>电话:
            <el-input placeholder="请输入内容" v-model="mobile" clearable></el-input>角色:
            <el-input placeholder="请输入内容" v-model="role_name" clearable></el-input>状态:
            <el-input placeholder="请输入内容" v-model="mg_state" clearable></el-input>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="tjok">确 定</el-button>
            </span>
          </el-dialog>
        </div>
        <br />
        <el-table :data="tolist" border>
          <el-table-column type="index" label="#" width="50"></el-table-column>
          <el-table-column prop="username" label="姓名" width="130"></el-table-column>
          <el-table-column prop="email" label="邮箱" width="170"></el-table-column>
          <el-table-column prop="mobile" label="电话" width="160"></el-table-column>
          <el-table-column prop="role_name" label="角色" width="160"></el-table-column>
          <el-table-column prop="create_time" label="注册时间" width="170"></el-table-column>
          <el-table-column label="状态" width="120">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.mg_state"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" circle></el-button>
              <el-button type="warning" icon="el-icon-star-off" circle></el-button>

              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                <el-button type="text">
                  <el-button type="danger" icon="el-icon-delete" circle></el-button>
                </el-button>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <span class="demonstration">完整功能</span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[ 2, 3, 4]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
          ></el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      tableData: [],
      tolist: [],
      input: "",
      dialogVisible: false,
      username: "",
      email: "",
      input3: "",
      mobile: "",
      role_name: "",
      create_time: "",
      mg_state: "",
      num: 2,
    };
  },
  mounted() {
    this.$axios.get("http://localhost:8080/userlist.json").then((res) => {
      console.log(res.data.data.users);
      this.tableData = res.data.data.users;
      for (var a = 0; a < 2; a++) {
        this.tolist.push(this.tableData[a]);
      }
      this.tolist.forEach((ele) => {
        ele.create_time = moment(new Date()).format("YYYY-MM-DD hh:mm:ss");
      });
    });
  },

  methods: {
    sx() {
      this.$router.go(0);
    },
    deleteRow(index, rows) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          rows.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      console.log(111);
    },
    tjok() {
      this.tableData.push({
        username: this.username,
        email: this.email,
        mobile: this.mobile,
        role_name: this.role_name,
        create_time:
          moment().format("YYYY-MM-DD ") + moment().format("HH:mm:ss"),
        mg_state: this.mg_state,
      });

      this.dialogVisible = false;
    },
    sc() {
      this.tableData.forEach((ele) => {
        if (ele.username.includes(this.input3)) {
          this.tableData = [];
          this.tableData.push(ele);
        }
      });
    },
    handleSizeChange(val) {
      this.tolist = [];
      this.num = val;
      for (let a = 0; a < val; a++) {
        this.tolist.push(this.tableData[a]);
      }
    },
    handleCurrentChange(val) {
      console.log(val);
      this.tolist = [];
      let xian =  this.num * val;
      if(xian>this.tableData.length){
        xian=this.tableData.length
      }

      let qian =  this.num * (val - 1);
      for (let a = qian; a < xian; a++) {
        this.tolist.push(this.tableData[a]); 
      }
    },
  },
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.nav {
  width: 36%;
  display: flex;
  justify-content: space-between;
}
</style>